<template>
  <n-config-provider :theme-overrides="themeOverThemes">
    <n-card
      :bordered="false"
      class="vaw-tab-split-side-bar-wrapper"
      :content-style="{ padding: 0 }"
      style="border-radius: 0px"
      :class="[
        !state.isCollapse ? 'open-status' : 'close-status',
        state.sideBarBgColor === 'image' ? 'sidebar-bg-img' : '',
      ]"
    >
      <div class="tab-split-tab-wrapper" :style="{ backgroundColor: bgColor }">
        <Logo class="tab-split-logo-wrapper" :show-title="false" />
        <div style="height: calc(100% - 48px)">
          <n-scrollbar>
            <div
              id="tabSplitContentWrapper"
              class="tab-split-content-wrapper"
              :style="contentWrapperStyle"
            >
              <div
                v-for="item of tabs"
                :key="item.fullPath"
                class="label-item-wrapper"
                :class="{ 'vaw-tab-split-item-is-active': item.checked.value }"
                @click="changeTab(item)"
              >
                <SvgIcon :prefix="item.iconPrefix" :name="item.icon" />
                <span>{{ item.label }}</span>
              </div>
            </div>
          </n-scrollbar>
        </div>
      </div>
      <div class="tab-split-menu-wrapper">
        <Logo class="tab-split-logo-wrapper" :show-logo="false" />
        <ScrollerMenu :routes="routes" />
      </div>
      <div class="mobile-shadow"></div>
    </n-card>
  </n-config-provider>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref, shallowReactive, watch } from 'vue'
  import { RouteLocationNormalizedLoaded, useRoute, useRouter } from 'vue-router'
  import { RouteRecordRawWithHidden, SideTheme, SplitTab, ThemeMode } from '../../types/store'
  import { isExternal, transformSplitTabMenu } from '../../utils'
  import { useLayoutStore } from '../../components/index'
  export default defineComponent({
    name: 'TabSplitSideBar',
    props: {
      showLogo: {
        type: Boolean,
        default: true,
      },
    },
    setup() {
      const store = useLayoutStore()
      const tabs = shallowReactive([] as Array<SplitTab>)
      const routes = shallowReactive([] as Array<RouteRecordRawWithHidden>)
      const route = useRoute()
      const router = useRouter()
      watch(
        () => route.fullPath,
        () => {
          doChangeTab(route)
        }
      )
      onMounted(() => {
        tabs.length = 0
        tabs.push(...transformSplitTabMenu(store?.getSplitTabs()))
        doChangeTab(route)
      })
      function doChangeTab(route: RouteLocationNormalizedLoaded) {
        const matchedRoutes = route.matched
        if (matchedRoutes && matchedRoutes.length > 0) {
          tabs.forEach((it) => {
            if (it.fullPath === matchedRoutes[0].path) {
              it.checked.value = true
              if (it.children) {
                routes.length = 0
                routes.push(...(it.children as Array<RouteRecordRawWithHidden>))
              }
            } else {
              it.checked.value = false
            }
          })
        }
      }
      function changeTab(item: SplitTab) {
        tabs.forEach((it) => {
          it.checked.value = it.fullPath === item.fullPath
        })
        findPath(item)
      }
      function findPath(item: SplitTab) {
        if (item.children && item.children.length > 0) {
          const firstItem = item.children[0]
          if (firstItem.children && firstItem.children.length > 0) {
            findPath({
              label: firstItem.meta?.title,
              iconPrefix: firstItem.meta?.iconPrefix,
              icon: firstItem.meta?.icon,
              fullPath: firstItem.fullPath,
              children: firstItem.children,
              checked: ref(false),
            } as SplitTab)
          } else {
            if (isExternal(firstItem.fullPath as string)) {
              routes.length = 0
              routes.push(...(item.children as Array<RouteRecordRawWithHidden>))
              window.open(firstItem.fullPath)
            } else {
              router.push(firstItem.fullPath || '/').then((error) => {
                if (error) {
                  if (firstItem.fullPath === route.path || firstItem.fullPath === route.fullPath) {
                    routes.length = 0
                    routes.push(...(item.children as Array<RouteRecordRawWithHidden>))
                  }
                }
              })
            }
          }
        }
      }
      const themeOverThemes = computed(() => {
        if (store?.state.theme === ThemeMode.DARK) {
          return {}
        }
        if (store?.state.sideBarBgColor === SideTheme.DARK)
          return {
            common: {
              cardColor: '#001428',
              textColor1: '#bbbbbb',
              textColor2: '#bbbbbb',
            },
            Menu: {
              itemColorActive: 'rgba(24, 160, 88, 0.4)',
            },
          }
        if (store?.state.sideBarBgColor === SideTheme.WHITE)
          return {
            common: {
              cardColor: '#ffffff',
            },
          }
        if (store?.state.sideBarBgColor === SideTheme.IMAGE)
          return {
            common: {
              textColor1: '#bbbbbb',
              textColor2: '#bbbbbb',
              primaryColor: '#fff',
            },
            Menu: {
              itemColorActive: 'rgba(24, 160, 88, 0.8)',
              itemTextColorHover: '#f5f5f5',
              itemIconColorHover: '#f5f5f5',
            },
          }
        return {}
      })
      const contentWrapperStyle = computed(() => {
        return `--select-text-color: ${
          store?.state.theme === 'light' || store?.state.sideBarBgColor === 'white'
            ? '#fff'
            : 'var(--text-color)'
        }`
      })
      const bgColor = computed(() => {
        if (store?.state.theme === ThemeMode.DARK) {
          return '#000000'
        }
        if (store?.state.sideBarBgColor === SideTheme.DARK) return '#000000'
        if (store?.state.sideBarBgColor === SideTheme.BLUE) return '#106dce'
        if (store?.state.sideBarBgColor === SideTheme.WHITE) return '#f5f5f5'
        if (store?.state.sideBarBgColor === SideTheme.IMAGE) return 'rgba(255,255,255, 0.1)'
        return '#ffffff'
      })
      return {
        state: store?.state,
        tabs,
        routes,
        changeTab,
        findPath,
        bgColor,
        contentWrapperStyle,
        themeOverThemes,
      }
    },
  })
</script>

<style scoped lang="scss">
  @import '../../assets/styles/variables.scss';
  .sidebar-bg-img {
    background-image: url('../../assets/bg_img.webp') !important;
    background-size: cover;
  }
  .open-status {
    width: $menuWidth;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.12);
    transition: all $transitionTime;
  }
  .close-status {
    width: $minMenuWidth;
    box-shadow: none;
    transition: all $transitionTime;
  }
  .vaw-tab-split-side-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100vh;
    box-sizing: border-box;
    z-index: 999;
    .tab-split-tab-wrapper {
      position: relative;
      top: 0;
      left: 0;
      width: $tabSplitMenuWidth;
      min-width: $tabSplitMenuWidth;
      max-width: $tabSplitMenuWidth;
      overflow: hidden;
      height: 100vh;
      box-sizing: border-box;
      .tab-split-logo-wrapper {
        max-width: $tabSplitMenuWidth;
        min-width: $tabSplitMenuWidth;
      }
      .tab-split-content-wrapper {
        position: relative;
        height: 100%;
        @mixin after {
          content: '';
          position: absolute;
          left: 5px;
          top: 5px;
          right: 5px;
          bottom: 5px;
          border-radius: 3px;
          z-index: -1;
        }
        .label-item-wrapper {
          position: relative;
          min-height: $logoHeight * 1.2;
          padding: 10px 0;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          color: var(--text-color);
          z-index: 1;
          & > i {
            font-size: 16px;
          }
          & > span {
            font-size: 12px;
            line-height: 14px;
            margin-top: 5px;
          }
          &:hover {
            cursor: pointer;
          }
          &::after {
            @include after;
          }
          & svg {
            width: 26px;
            height: 26px;
          }
        }
        .label-item-wrapper:hover::after {
          background-color: var(--primary-color);
        }
        .vaw-tab-split-item-is-active {
          color: var(--select-text-color);
        }
        .vaw-tab-split-item-is-active::after {
          background-color: var(--primary-color);
          @include after;
        }
      }
    }
    .tab-split-menu-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: $tabSplitMenuWidth;
      overflow-x: hidden;
    }
    .vaw-menu-wrapper {
      overflow-x: hidden;
      color: white;
    }
  }
  .is-mobile {
    .open-status {
      width: $menuWidth;
      transform: translateX(0);
      transition: transform $transitionTime;
    }
    .close-status {
      width: $menuWidth;
      transform: translateX(-$menuWidth);
      transition: transform $transitionTime;
      box-shadow: none;
    }
  }
</style>
